<script setup lang="ts">
  import { ref, watch } from 'vue'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: () => false,
    },
    url: {
      type: String,
      required: true,
    },
    name: String,
  })

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
  }>()

  // 弹窗显示状态
  const modalVisible = ref(props.modelValue)

  // 关闭事件
  const onClose = () => {
    modalVisible.value = false
    emits('update:modelValue', modalVisible.value)
  }

  watch(props, (value) => {
    if (value.modelValue && value.url) {
      modalVisible.value = true
    }
  })
</script>

<template>
  <div>
    <el-dialog
      :title="props.name ? props.name : '图片预览'"
      :model-value="props.modelValue"
      @close="onClose"
    >
      <div class="img_container">
        <img :src="props.url" alt="" />
      </div>
      <template #footer>
        <el-button @click="onClose" style="width: 2.8vw">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
  .img_container {
    display: flex;
    justify-content: center;
  }
</style>
